<template>
  <div class="news-content">
    <!-- <img :src="news[0].imageInput" alt="" /> -->
    <!-- <div class="news-img" v-for="item in news" :key="item.id"> -->
    <!-- <img :src="item.imageInput" alt="" /> -->
    <!-- </div> -->
    <div class="news-title">
      <p :class="{ active: curId == 1 }" @click="showId(1)">
        热门
        <b v-if="curId == 1"></b>
      </p>
      <div class="news-tit" v-for="item in newsTit" :key="item.id">
        <p :class="{ active: curId == item.id }" @click="showId(item.id)">
          {{ item.name }}
          <b v-if="curId == item.id"></b>
        </p>
      </div>
    </div>

    <div class="news-con">
      <div class="news-info" v-for="item in news" :key="item.id">
        <div class="text">
          <h3>{{ item.title }}</h3>
          <p>{{ item.createTime }}</p>
        </div>
        <div class="text-img">
          <img :src="item.imageInput" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewsInfo",

  data() {
    return {
      news: [],
      newsTit: [],
      curId: 1,
    };
  },

  methods: {
    showId(id) {
      this.curId = id;
      this.$requestTools(`/crmeb/article/list/${id}?page=1&limit=8`).then(
        (res) => {
          console.log(res.data.data.list);
          this.news = res.data.data.list;
        }
      );
    },
  },

  async created() {
    const {
      data: {
        data: { list },
      },
    } = await this.$requestTools("/crmeb/article/hot/list", "GET", {
      params: {},
    });
    this.news = list;

    this.$requestTools("/crmeb/article/category/list", "GET", {
      params: {},
    }).then((res) => {
      this.newsTit = res.data.data.list;
    });
  },
};
</script>

<style lang="scss">
.active {
  color: black !important;
}
.news-content {
  padding: 10px;
  background-color: #fff;
  .news-title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    p {
      color: #ccc;
      position: relative;
      b {
        display: block;
        width: 25%;
        height: 2px;
        background-color: #ff448f !important;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: -3px;
      }
    }
  }
  .news-con {
    margin-top: 10px;
    .news-info {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      border-bottom: 1px solid #f0f0f0;
      padding: 10px 0;
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h3 {
          font-weight: normal;
          font-size: 14px;
          color: #282828;
        }
        p {
          font-size: 11px;
          color: #999;
        }
      }
      .text-img {
        img {
          width: 125px;
          height: 78px;
        }
      }
    }
  }
}
</style>
